<template>
  <el-card class="box-card">
    <el-form :inline="true" :model="query" label-suffix="：">
      <el-form-item label="号码">
        <el-input
          style="width: 200px"
          v-model.trim="query.dto.blackPhone"
          maxlength="11"
          placeholder="请输入手机号码"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="menu_box">
      <el-button type="primary" plain @click="handAdd">
        <el-icon><Plus /></el-icon>新增</el-button
      >
    </div>
    <!-- <el-table :data="tableData" v-loading="loading" border>
      <el-table-column label="黑名单号码" prop="blackPhone" align="center" />
      <el-table-column label="添加时间" prop="createTime" align="center" />
      <el-table-column label="添加人" prop="createUser" align="center" />
      <el-table-column label="账号" prop="userCode" align="center" />
      <el-table-column label="备注" prop="remark" align="center" />
      <el-table-column label="操作" width="260" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="handEdit(scope.row)">编辑</el-button>
          <el-button type="primary" link @click="handDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      :data="tableData" :columns="tableColumns" @selection-change="handleSelect" />
    <Pagination
      :pageable="page"
      :handleSizeChange="handleSizeChange"
      :handleCurrentChange="handleCurrentChange"
    /> -->

    <CustomTable
      ref="el"
      v-loading="loading"
      :page="page"
      :data="tableData"
      :columns="tableColumns"
      @selection-change="handleSelect"
    />

    <Pagination
      :pageable="page"
      :handleSizeChange="handleSizeChange"
      :handleCurrentChange="handleCurrentChange"
    />
    <AddBlack ref="addBlackRef" />
  </el-card>
</template>

<script lang="tsx" setup>
import { reactive, ref } from 'vue';
import { getBlackList, deleteBlackList } from '@/api/role';
import { useTable } from '@/hooks/useTable';
import AddBlack from './components/add.vue';
import CustomTable from '@/components/CustomTable/index.vue';
import { Action } from 'element-plus';
const query = reactive({
  dto: {
    blackPhone: ''
  }
});
const tableColumns = reactive([
  { label: '黑名单号码', prop: 'blackPhone' },
  { label: '添加时间', prop: 'createTime' },
  { label: '添加人', prop: 'createUser' },
  { label: '账号', prop: 'userCode' },
  { label: '备注', prop: 'remark' },
  {
    label: '操作',
    prop: 'edit',
    render: ({ row }) => {
      return (
        <div>
          <el-button type="primary" plain onClick={() => handEdit(row)}>
            <el-icon name="el-icon-edit" />
            编辑
          </el-button>
          <el-button type="primary" plain onClick={() => handDelete(row.id)}>
            <el-icon name="el-icon-delete" />
            删除
          </el-button>
        </div>
      );
    }
  }
]);

const addBlackRef = ref();
const { tableData, loading, page, getList, handleSizeChange, handleCurrentChange } = useTable({
  apiFn: getBlackList,
  params: query,
  isPageable: true
});
async function search() {
  await getList();
}
async function handAdd() {
  await addBlackRef.value.init({ type: 'add' });
  search();
}
function handDelete(id: string): any {
  ElMessageBox.alert('确认删除该黑名单号码!', '注意', {
    confirmButtonText: '确定',
    callback: (action: Action) => {
      console.log(action, 'action');
      if (action === 'confirm') {
        deleteBlackList({ id: id }).then(() => {
          ElMessage.success('删除成功');
          search();
        });
      }
    }
  });
}
async function handEdit(row: object): Promise<any> {
  await addBlackRef.value.init({ type: 'edit', row });
  search();
}
</script>

<style lang="scss" scoped>
.menu_box {
  margin-bottom: 10px;
}
</style>
